<template>
  <div class="history">
    <div class="history-table">
      <el-table 
      :data="getOnlineOrderList"
      style="width:100%"
      border>
        <el-table-column 
          type="index"
          align="center"
        >
        </el-table-column>
        <el-table-column 
          label="订单号"
          prop="orderId"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="入住列表"
          prop="userIdArr"
          align="center"
          :formatter="userNameFormat"
        >
        </el-table-column>
        <el-table-column 
          label="房间号"
          prop="roomId"
          align="center"
          :formatter="roomIdFormat"
        >
        </el-table-column>
        <el-table-column
            label="房间类型"
            prop="typeName"
            align="center"
        >
        </el-table-column>
        <el-table-column 
          label="总费用"
          prop="totalPrice"
          align="center"
        >
        </el-table-column>
        <el-table-column 
          label="入住时间"
          prop="inTime"
          align="center"
        >
        </el-table-column>
        <el-table-column 
          label="退房时间"
          prop="outTime"
          align="center"
        >
        </el-table-column>
        <el-table-column 
          label="订单状态"
          prop="state"
          align="center"
          :formatter="stateFormat"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
export default {
  name:'ViewOnlineOrder',
  data() {
    return {
      OrdersData:[],    //所有的数据
      currentPage:1,  //当前页码
      pageSize:1,    //每页显示的数据数量
      showData:[],     //显示出来的数据集合
      queryInfo:'',
      userId:'',
      userName:'',
      stateConfig: ["待核销","已核销","已取消","待支付","待分配"],
    }
  },
  computed:{
    getOrderListOfUser(){
      return this.$store.getters.getOrderListOfUser || [];
    },
    // 获取全部线上待分配订单
    getOnlineOrderList(){
      return this.$store.getters.getOnlineOrderList || [];
    },
    // 获取用户列表[{userName, userId}]
    userList(){
      return this.$store.getters.getUserList || [];
    },
    // 获取仓库用户列表数据
    getUserNameList(){
      return this.$store.getters.getUserNameList || [];
    },
  },
  mounted(){
    this.$store.dispatch('getUserList');
    this.$store.dispatch('getOnlineOrder');
  },
  methods:{
    // 将用户id转换为用户名
    userNameFormat(row, column, cellValue){
      if (cellValue == null || cellValue == '') return '';
      const userNameList = this.getUserNameList;
      let arr = cellValue.split(',');
      let nameList = '';
      for (let item of arr){
        if (nameList != ''){
          nameList += (','+userNameList[item]);
        }else{
          nameList += userNameList[item];
        }
      }
      return nameList;
    },
    // 将state转换为状态显示
    stateFormat(row, column, cellValue){
      if (cellValue == null || cellValue == '') return '';
      return this.stateConfig[parseInt(cellValue)];
    },
    // 将空房间号转换为待分配
    roomIdFormat(row, column, cellValue){
      if (cellValue == null || cellValue == '') return '待分配';
      return cellValue;
    }
  },
  watch:{
  }
}
</script>

<style lang="less" scoped>
  .history{
    padding: 20px;
  }
  .block {
    margin-top: 15px;
  }
</style>
